<template>
  <view class="resume-page">
    <!-- <uni-nav-bar title="个人信息"></uni-nav-bar> -->

    <view class="content">
      <!-- 头像上传 -->
      <view class="module-item">
        <view class="left-content">
          <text class="label-text">头像</text>
          <text class="tip-text">真实头像更容易提升求职成功率</text>
        </view>
        <view class="avatar-area">
          <image class="avatar" src="/src/static/user-avatar.png" mode="aspectFill"></image>
        </view>
      </view>

      <!-- 个人信息表单 -->
      <view class="module-item">
        <!-- 姓名模块 -->
        <view class="left-content">
          <text class="label-text">姓名</text>
          <text class="tip-text">请输入您的真实姓名</text>
        </view>
        <input class="input-style" v-model="name" placeholder="" />
      </view>

      <!-- 当前身份模块 -->
      <view class="module-item">
        <view class="left-content">
          <text class="label-text">当前身份</text>
          <text class="tip-text">请输入当前身份</text>
        </view>
        <input class="input-style" v-model="identity" placeholder="" />
      </view>

    </view>

    <!-- 修改性别模块 -->
    <view class="module-item">
      <view class="left-content">
        <text class="label-text">性别</text>
        <picker mode="selector" :range="gender" @change="changeGender">
          <view class="picker-style">{{ selectedGender || '请选择性别' }}</view>
        </picker>
      </view>
    </view>
  </view>

  <!-- 其他表单项统一修改 -->
  <view class="module-item">
    <view class="left-content">
      <text class="label-text">出生年月</text>
      <picker mode="date" @change="changeDate">
        <view class="picker-style">{{ selectedBirthday || '选择日期' }}</view>
      </picker>
      <!-- <text class="tip-text">选择日期</text> -->
    </view>

  </view>
  <view class="module-item">
    <view class="left-content">
      <text class="label-text">现居城市</text>

      <picker mode="region" @change="changeRegion">
        <view class="picker-style">{{ selectedLivingCity || '请选择现居城市' }}</view>
      </picker>
      <!-- <text class="tip-text">请选择现居城市</text> -->
    </view>

  </view>

  <!-- 新增模块开始 -->
  <view class="module-item">
    <view class="left-content">

      <text class="label-text">户口所在地</text>

      <picker mode="region" @change="changeRegions">
        <view class="picker-style">{{ selectedRegistration || '选择城市地区，用于简历投递' }}</view>
      </picker>
      <!-- <text class="tip-text">选择城市，用于简历投递</text> -->
    </view>

  </view>
  <view class="module-item">
    <view class="left-content">
      <text>政治面貌</text>

      <picker mode="selector" :range="politicalStatusOptions" @change="changePolitical">
        <view class="picker-style">{{ selectedPoliticalStatus || '请选择政治面貌，用于投递简历' }}</view>
      </picker>
      <!-- <text class="tip-text">请选择政治面貌，用于投递简历</text> -->
    </view>

  </view>


  <view class="module-item" :class="{ 'error-line': mobileError }">
    <view class="left-content">
      <text class="label-text">手机号码</text>
      <text class="tip-text">用于接收面试短信</text>
    </view>
    <input class="input-style" v-model="mobile" placeholder="" type="text" maxlength="11" @blur="validateMobile"
      @input="mobileError && validateMobile()" :class="{ 'error-border': mobileError }" />
  </view>
  <text v-if="mobileError" class="error-msg">请输入有效的手机号码</text>

  <view class="module-item">
    <view class="left-content">
      <text class="label-text">电子邮箱</text>
      <text class="tip-text">用于接收面试邮件</text>
      <input class="input-style" v-model="email" placeholder="" type="number" />
    </view>


    <!-- <text>电子邮箱</text>
        <input class="input-style" placeholder="用于接收面试邮件" /> -->
  </view>

  <view class="module-item">
    <view class="left-content">
      <text>微信号</text>
      <text class="tip-text">用于与HR交换微信</text>
    </view>
    <input class="input-style" v-model="wechat" placeholder="" />
    <!-- <text class="tip-text">用于与HR交换微信</text> -->
    <!-- <input class="input-style" placeholder="请输入手机号码" type="number" /> -->
  </view>
  <!-- 新增模块结束 -->

  <!-- 剩余表单项... -->

  <!-- 保存按钮 -->
  <view class="save-button-container">
    <button class="save-button" @click="handleSave">保存信息</button>
  </view>

</template>

// 修改script部分
<script setup lang="ts">
import {
  getResumeListAPI,
  getResumeBasicDetailsAPI,
  postResumeSpecificInfoAPI,
  getResumeSpecificInfoAPI
} from '@/service/resume'
import type { resumeDetail } from '@/types/resume'
import type { resumeListInfo } from '@/types/resumeList'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
const userId = ref('')

// 使用ref创建响应式变量
const gender = ref(['男', '女', '未知'])
const identity = ref('')
const name: any = ref('')
const politicalStatusOptions = ref(['群众', '共青团员', '中共党员', '民主党派', '其他'])
const selectedGender = ref('')
const selectedBirthday = ref('')
const selectedLivingCity = ref<string[]>()
const selectedRegistration = ref<string[]>()
const selectedPoliticalStatus = ref('')
const mobile = ref('')
const mobileError = ref(false)
// 需要在script setup顶部添加这些变量声明
const jobIntention = ref('')
const education = ref('')
const startDate = ref('')
const endDate = ref('')
const university = ref('')
const majorCourses = ref('')
const internshipExperience = ref('')
const campusExperience = ref('')
const skillCertificate = ref('')
const selfEvaluation = ref('')

// 手机号校验方法
const validateMobile = () => {
  const reg = /^1[3-9]\d{9}$/
  mobileError.value = !reg.test(mobile.value)
}

// 在保存时添加校验
const handleSave = async () => {
  validateMobile()
  if (mobileError.value) return
  if (!name.value || !mobile.value) {
    return uni.showToast({ title: '请填写必填项', icon: 'none' })
  }

  try {
    const resumeListInfo = {
      id: 1,
      userId: userId.value,
      name: name.value,
      gender: selectedGender.value, // 修正为selectedGender
      birthday: selectedBirthday.value,
      jobIntention: jobIntention.value,
      education: education.value,
      mobile: mobile.value,
      startDate: startDate.value, // 修正变量名
      endDate: endDate.value,
      university: university.value,
      majorCourses: majorCourses.value,
      internshipExperience: internshipExperience.value,
      campusExperience: campusExperience.value, // 修正拼写
      skillCertificate: skillCertificate.value,
      selfEvaluation: selfEvaluation.value,
    }
    
    // 调用API保存数据
    await postResumeSpecificInfoAPI(resumeListInfo)
    
    uni.showToast({ title: '保存成功' })
    uni.navigateTo({
      url: '../../pagesInterview/editResume/editResume'
    })
  } catch (e) {
    console.error('保存失败:', e)
    uni.showToast({ title: '保存失败', icon: 'none' })
  }
}
const email = ref('')
const wechat = ref('')

// 修改事件处理函数
const changeGender = (e: any) => {
  selectedGender.value = gender.value[e.detail.value]
}

const changeDate = (e: any) => {
  selectedBirthday.value = e.detail.value
}

const changeRegion = (e: any) => {
  selectedLivingCity.value = e.detail.value
}

const changeRegions = (e: any) => {
  selectedRegistration.value = e.detail.value
}

const changePolitical = (e: any) => {
  selectedPoliticalStatus.value = politicalStatusOptions.value[e.detail.value]
}

onLoad(async () => {
  try {
     
    const specificRes = await getResumeSpecificInfoAPI({
      userId: userId.value
    })
    
    if (specificRes.data) {
      // 填充表单数据    
      name.value = specificRes.data.name || ''
      selectedGender.value = specificRes.data.gender || ''
      selectedBirthday.value = specificRes.data.birthday || ''
      selectedLivingCity.value = specificRes.data.livingCity || []
      selectedRegistration.value = specificRes.data.registration || []
      selectedPoliticalStatus.value = specificRes.data.politicalStatus || ''
      mobile.value = specificRes.data.mobile || "";
      email.value = specificRes.data.email || "";
      wechat.value = specificRes.data.wechat || "";
    }
    
  } catch (e) {
    console.error('获取简历信息失败:', e)
    uni.showToast({ title: '获取简历信息失败', icon: 'none' })
  }
})
   

</script>

<style>
/* 在原有样式基础上新增 */
.module-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  margin: 15rpx 15rpx;
  background: #fff;
  border-radius: 10rpx;
  padding-bottom: 20rpx;
}

.avatar-area {
  width: 200rpx;  
  height: 200rpx; 
  overflow: hidden;
}

.avatar {
  width: 100%;
  height: 100%;

}

.input-style {
  color: #777;
  width: 60%;
  text-align: right;
  font-size: 14px;
  
}
.input-style::placeholder {
  color: #777;
  opacity: 1;
  font-size: 14px;
  
}
.picker-style {
  color: #777;
  font-size:14px;
 
}
.module-item::after {
  content: '';
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  bottom: 0;
  height: 2px;
  
}


.error-line::after {
  background: #999 !important;
  /* 错误时显示红色 */
}

.error-msg {
  color: #ff0000;
  font-size: 12px;
  margin: 8rpx 0 0 40rpx;
  
}
.save-button-container {
  margin-top: 40rpx;
  padding: 30rpx;
}

.save-button {
  background: #07c160;
  color: white;
  border-radius: 50rpx;
}

/* 新增样式 */
.left-content {
  display: flex;
  flex-direction: column;
  flex: 1;  
}
.module-item::after {
  content: '';
  position: absolute;
  left: 20rpx;
  right: 20rpx;
  bottom: 0;
  height: 1px;
  background: #eee;
}

/* 调整头像容器间距 */
.avatar-area {
  margin-bottom: 20rpx;
}

.label-text {
  font-size: 16px;
  color: #333;
}

.tip-text {
  font-size: 12px;
  color: #777;
  margin-top: 8rpx;
}

.picker-style {
  color: #777;  
  font-size: 12px;  
}

.error-border {
  border-color: #ff0000 !important;
}

.error-msg {
  color: #ff0000;
  font-size: 12px;
  margin-top: 8rpx;
}
</style>
